<template>
    <LogoAndSearch></LogoAndSearch>
    <TopInfo></TopInfo>

    <NavMenu></NavMenu>

    <el-form :model="formData1" label-width="120px" :inline="true">
        <el-card class="box-card">

            <el-form-item>
                <el-radio-group v-model="formData1.op1" class="c1">
                    <el-radio label="single" size="small">单程</el-radio>
                    <el-radio label="return" size="small">换乘</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="出发地" label-width="60px">
                <el-input v-model="formData1.start" style="width: 100px;" size="small" />
            </el-form-item>
            <el-form-item label="目的地" label-width="60px">
                <el-input v-model="formData1.arrive" style="width: 100px;" size="small" />
            </el-form-item>
            <el-form-item label="出发日" label-width="60px">
                <el-date-picker v-model="formData1.godate" type="date" style="width: 100px;" :disabledDate="disabledDateFn"
                    size="small" />
            </el-form-item>
            <el-form-item label="换乘站" label-width="60px">
                <el-input v-model="formData1.change" style="width: 100px;" size="small"
                    :disabled="formData1.op1 == 'single'" placeholder="简拼/全拼/汉字" />
            </el-form-item>

            <el-form-item>
                <el-radio-group v-model="formData1.op2" class="c1">
                    <el-radio label="adult" size="small">普通</el-radio>
                    <el-radio label="student" size="small">学生</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" style="background-color: orange;width: 100px;">查询</el-button>
            </el-form-item>

        </el-card>

        <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
            <el-tab-pane :label="item" :name="item.substring(0, 5)" v-for="item in dates" :key="item" size="small">



                <el-form-item label="车次席别：" style="margin-left: -80px;">
                    <el-checkbox-group v-model="formData1.seattype" @change="displaySeattype">
                        <el-checkbox label="商务座" />
                        <el-checkbox label="一等座" />
                        <el-checkbox label="二等座" />

                    </el-checkbox-group>
                </el-form-item>

                <br>
                <el-form-item label="出发车站：" style="margin-left: -80px;">
                    <el-checkbox-group v-model="formData1.from" @change="displayFrom">
                        <el-checkbox :label="item.snm" v-for="item in fromstation" :key="item" />

                    </el-checkbox-group>
                </el-form-item>
                <br>
                <el-form-item label="到达车站：" style="margin-left: -80px;">
                    <el-checkbox-group v-model="formData1.to" @change="displayTo">
                        <el-checkbox :label="item.snm" v-for="item in tostation" :key="item" />
                    </el-checkbox-group>
                </el-form-item>



            </el-tab-pane>

        </el-tabs>

    </el-form>

    <div style="position:absolute;left: 10%;bottom: 35%;line-height: 30px;">{{ formData1.start }} -->
        {{ formData1.arrive }}（{{ displayData }}）共计{{ TableData.length }}个车次</div>

    <el-table :data="TableData" height="100%" style="width: 80%;position: absolute;left: 10%;top: 65%;" stripe border
        @cell-click="cellClick" ref="multipleTable" highlight-current-row
        :header-cell-style="{ color: '#FFF', background: 'rgb(40,139,204)' }">

        <el-table-column type="expand" width="1">
            <template #default="props">

                <el-table :data="props.row.money" :border="true" :show-header="false"
                    style="margin-left: 560px;color: orange;width: 565px;">
                    <el-table-column prop="business" width="80" />
                    <el-table-column prop="one" width="80" />
                    <el-table-column prop="two" width="80" />
                    <el-table-column prop="seniorSoft" width="100" />
                    <el-table-column prop="softSleep" width="80" />
                    <el-table-column prop="hardSleep" width="80" />
                    <el-table-column prop="hardSit" width="65" />
                </el-table>

            </template>
        </el-table-column>



        <el-table-column prop="trainno" label="车次" width="80" />
        <el-table-column prop="fromnm" label="出发站" width="100" />
        <el-table-column prop="tonm" label="到达站" width="100" />
        <el-table-column prop="totime" label="出发时间" width="100" />
        <el-table-column prop="ltime" label="到达时间" width="100" />
        <el-table-column prop="running" label="历时" width="80" />
        <el-table-column prop="bussiness" label="商务座" width="80" />
        <el-table-column prop="one" label="一等座" width="80" />
        <el-table-column prop="two" label="二等座" width="80" />
        <el-table-column prop="seniorSoft" label="高级软卧" width="100" />
        <el-table-column prop="softSleep" label="软卧 / 一等卧" width="80" />
        <el-table-column prop="hardSleep" label="硬卧 / 二等卧" width="80" />
        <el-table-column prop="hardSit" label="硬座" width="70" />
        <el-table-column fixed="right" label="备注" width="90">
            <template #default="scope">
                <el-button type="primary" @click="ToPay(scope.row)">预订</el-button>
            </template>
        </el-table-column>

    </el-table>
</template>

<script setup >

import LogoAndSearch from '../../components/home/LogoAndSearch.vue';
import TopInfo from '../../components/home/TopInfo.vue'
import NavMenu from '../../components/home/NavMenu.vue';
import { ref } from 'vue'
import { useRouter } from "vue-router";


// eslint-disable-next-line vue/prefer-import-from-vue
import { getCurrentInstance } from "@vue/runtime-core";

import { ElMessage } from 'element-plus'
import { useQueryStore } from '../../stores/query'

//引入storeToRefs
import { storeToRefs } from 'pinia'

//实例化对象
const queryStore = useQueryStore()

const { formData, fromstation, tostation, TableData } = storeToRefs(queryStore)


import { usePassengerStore } from '../../stores/passenger'

//实例化对象
const passengerStore = usePassengerStore()


console.log(TableData.value);

//解构出来的值在js中要加.value
//template中可使用{{ formData}}
//v-model或:model可直接使用
//console.log(formData.value);

const router = useRouter();
let date = '';

if (typeof (formData.value.date) == "string") {
    date = '0' + formData.value.date.substring(5, 9);
}
else {
    let y = formData.value.date.getFullYear()
    let m = formData.value.date.getMonth() + 1
    m = m < 10 ? ('0' + m) : m
    let d = formData.value.date.getDate()
    d = d < 10 ? ('0' + d) : d

    date = (y + '-' + m + '-' + d).substring(5, 10);
}

const activeName = ref(date)

let disabledDateFn = (time) => {

    return time.getTime() < Date.now() - 24 * 3600 * 1000 || time.getTime() > Date.now() + 14 * 24 * 3600 * 1000;
}

let formData1 = ref({
    op1: "single",
    op2: "adult",
    start: formData.value.fromnm,
    arrive: formData.value.tonm,
    godate: formData.value.date,
    change: '',
    seattype: [],
    from: [],
    to: []
})

//近15天的日期信息
let dates = ref([]);
let getDates = () => {

    let weeks = ['日', '一', '二', '三', '四', '五', '六'];

    var temp = Date.now() - 24 * 60 * 60 * 1000;
    for (let i = 0; i < 15; i++) {
        temp += 24 * 60 * 60 * 1000;
        var d = new Date(temp);

        var month = d.getMonth() + 1;
        var day = d.getDate();
        var week = d.getDay();

        var month1 = month < 10 ? "0" + month : month;
        var day1 = day < 10 ? "0" + day : day;
        var week1 = '周' + weeks[week];
        dates.value[i] = month1 + "-" + day1 + " " + week1;
    }
}
getDates();

let displayData = ref(dates.value[0])

dates.value.forEach(element => {
    if (element.substring(0, 5) == activeName.value) {
        displayData.value = element;
    }
});

// function sleep(ms) {
//     return new Promise(resolve => setTimeout(resolve, ms));
// }

//点击预订
async function ToPay(param) {
    if (sessionStorage.getItem('user') == null || sessionStorage.getItem('user') == '') {
        ElMessage.error('请先登录！')
        router.push("/")
    }
    else {

        param.date = '2023-' + displayData.value.substring(0, 5) + ' (' + displayData.value.substring(6, 10) + ')'
        param.bussmoney = param.money[0].business
        param.onemoney = param.money[0].one
        param.twomoney = param.money[0].two

        //查询乘车人
        passengerStore.queryPassenger();

        // await sleep(10);

        router.push({ path: '/pay', query: param })
    }
}

const handleClick = (tab) => {
    console.log(tab.props.label)
    displayData.value = tab.props.label
    formData1.value.godate = '2023-' + tab.props.label.substring(0, 5)
}


let displaySeattype = () => {
    console.log(formData1.value.seattype);

}

let displayFrom = () => {
    console.log(formData1.value.from);
}

let displayTo = () => {
    console.log(formData1.value.to);
}

//展开行
const currentInstance = getCurrentInstance();
let cellClick = (row, column, event) => {
    if (event.cellIndex != 0) {
        currentInstance.ctx.$refs.multipleTable.toggleRowExpansion(row);
    }
};


</script>

<style scoped>
.el-form-item {
    position: relative;
    left: 50px;
}

.c1 {
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
}

.box-card {
    width: 80%;
    height: 80px;
    position: absolute;
    left: 10%;
    top: 20%;
    background-color: rgb(238, 241, 248);
}

.el-tabs {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 240px;
}

:deep(.el-table__expand-icon) {
    display: none;
}
</style>